import React, { ReactElement, useContext } from 'react';
import { View, Text, ScrollView } from 'react-native';

import styles from './style';
import Card from '../Card';
import Button from '../../../../components/Button';
import { sureCredit } from '../../actions';
import { Store } from '../../reducer';
import { pointToYuan } from '../../../../util/transformMoney';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { data } = state;
  const { commodities, userYutouCoinAmount } = data;
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={{ alignItems: 'center' }}
    >
      <Text style={styles.coinAmount}>
        蜜蜂币余额：{pointToYuan(userYutouCoinAmount)}（仅限iOS使用）
      </Text>
      <View style={styles.loadCard}>
        {commodities.map(
          (item, index): ReactElement => (
            <Card key={item.commodityId} {...item} index={index} />
          )
        )}
      </View>
      <Button
        text="确认充值"
        onPress={sureCredit}
        style={styles.buyBtn}
        textStyle={styles.buyText}
      />
      <Text style={styles.desc}>
        {`充值说明： \n1. 蜜蜂币仅限iOS消费 \n2. 蜜蜂币是虚拟币，不会过期，但无法退款，提现或转账 \n3. 在充值过程遇到任何问题，可以联系客服`}
      </Text>
    </ScrollView>
  );
};
